<template>
  <div class="api-test-container">
    <h1>库存查询API测试</h1>
    
    <div class="test-section">
      <h2>API接口测试</h2>
      <div class="test-buttons">
        <el-button type="primary" @click="testPageApi">测试分页查询</el-button>
        <el-button type="success" @click="testStatsApi">测试统计信息</el-button>
        <el-button type="warning" @click="testStockFlowApi">测试出入库流水</el-button>
        <el-button type="info" @click="testStockDistributionApi">测试库存分布</el-button>
        <el-button type="danger" @click="testExportApi">测试导出功能</el-button>
      </div>
    </div>

    <div class="test-section">
      <h2>测试结果</h2>
      <div class="test-results">
        <el-card v-for="(result, index) in testResults" :key="index" class="result-card">
          <div class="result-header">
            <span class="result-title">{{ result.title }}</span>
            <el-tag :type="result.success ? 'success' : 'danger'">
              {{ result.success ? '成功' : '失败' }}
            </el-tag>
          </div>
          <div class="result-content">
            <p><strong>请求时间:</strong> {{ result.timestamp }}</p>
            <p><strong>响应状态:</strong> {{ result.status }}</p>
            <p><strong>响应数据:</strong></p>
            <pre class="result-data">{{ JSON.stringify(result.data, null, 2) }}</pre>
            <p v-if="result.error"><strong>错误信息:</strong> {{ result.error }}</p>
          </div>
        </el-card>
      </div>
    </div>

    <div class="test-section">
      <h2>API配置信息</h2>
      <div class="config-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="基础URL">/api/inventoryQuery/</el-descriptions-item>
          <el-descriptions-item label="分页查询">POST /page</el-descriptions-item>
          <el-descriptions-item label="统计信息">POST /getStats</el-descriptions-item>
          <el-descriptions-item label="出入库流水">POST /getStockFlow</el-descriptions-item>
          <el-descriptions-item label="库存分布">POST /getStockDistribution</el-descriptions-item>
          <el-descriptions-item label="导出数据">POST /export</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="apiTest">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useInventoryQueryApi } from '/@/api/inventory/inventoryQuery'

const inventoryApi = useInventoryQueryApi()
const testResults = ref<any[]>([])

// 添加测试结果
const addTestResult = (title: string, success: boolean, data: any, error?: string) => {
  testResults.value.unshift({
    title,
    success,
    timestamp: new Date().toLocaleString(),
    status: success ? '200' : '500',
    data,
    error
  })
}

// 测试分页查询API
const testPageApi = async () => {
  try {
    const result = await inventoryApi.page({
      page: 1,
      pageSize: 10,
      goodsName: '',
      warehouseName: ''
    })
    
    addTestResult('分页查询API', true, result.data)
    ElMessage.success('分页查询API测试成功')
  } catch (error: any) {
    addTestResult('分页查询API', false, null, error.message)
    ElMessage.error('分页查询API测试失败')
  }
}

// 测试统计信息API
const testStatsApi = async () => {
  try {
    const result = await inventoryApi.getStats({
      warehouseName: '',
      dateRange: null
    })
    
    addTestResult('统计信息API', true, result.data)
    ElMessage.success('统计信息API测试成功')
  } catch (error: any) {
    addTestResult('统计信息API', false, null, error.message)
    ElMessage.error('统计信息API测试失败')
  }
}

// 测试出入库流水API
const testStockFlowApi = async () => {
  try {
    const result = await inventoryApi.getStockFlow({
      goodsCode: 'HPDH6773',
      warehouseName: '仓库一',
      page: 1,
      pageSize: 10
    })
    
    addTestResult('出入库流水API', true, result.data)
    ElMessage.success('出入库流水API测试成功')
  } catch (error: any) {
    addTestResult('出入库流水API', false, null, error.message)
    ElMessage.error('出入库流水API测试失败')
  }
}

// 测试库存分布API
const testStockDistributionApi = async () => {
  try {
    const result = await inventoryApi.getStockDistribution({
      goodsCode: 'HPDH6773',
      warehouseName: '仓库一',
      page: 1,
      pageSize: 10
    })
    
    addTestResult('库存分布API', true, result.data)
    ElMessage.success('库存分布API测试成功')
  } catch (error: any) {
    addTestResult('库存分布API', false, null, error.message)
    ElMessage.error('库存分布API测试失败')
  }
}

// 测试导出API
const testExportApi = async () => {
  try {
    const result = await inventoryApi.exportData({
      page: 1,
      pageSize: 10,
      goodsName: '',
      warehouseName: ''
    })
    
    addTestResult('导出API', true, { 
      dataSize: result.data?.length || 0,
      contentType: result.headers?.['content-type'] || 'unknown'
    })
    ElMessage.success('导出API测试成功')
  } catch (error: any) {
    addTestResult('导出API', false, null, error.message)
    ElMessage.error('导出API测试失败')
  }
}
</script>

<style scoped>
.api-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
}

.test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.test-results {
  max-height: 600px;
  overflow-y: auto;
}

.result-card {
  margin-bottom: 15px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.result-title {
  font-weight: bold;
  font-size: 16px;
}

.result-content p {
  margin: 5px 0;
}

.result-data {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.config-info {
  margin-top: 20px;
}
</style>
